<template>
	<view class="zhaomu-wrap">
		<view class="left">
			<view>Tm</view>
			<image :src="myAvatar" class="avatar"></image>
			<view>{{myCharacter}}</view>
		</view>
		<view class="middle">
			<view class="xiangyan"> 想演：</view>
			<view class="title">{{name}}</view>
			<view class="plot">{{content}}</view>

		</view>
		<view class="right">
			<view class="zhaomuz">
				<image src="/static/juben/zhaomuzhong-background-zhaomu.jpg" class="bg-img" mode="widthFix"></image>
				<view class="word">招募中</view>
			</view>
			<view style="margin-top: 60upx;">
				<image :src="yourAvatar" class="avatar"></image>
				<view>{{yourCharacter}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			myAvatar: {
				type: String,
				default: "/static/juben/linshi/a1.jpg"
			},
			myCharacter: {
				type: String,
				default: "翠花"
			},
			yourAvatar: {
				type: String,
				default: "/static/juben/linshi/a2.jpg"
			},
			yourCharacter: {
				type: String,
				default: "狗蛋"
			},
			name: {
				type: String,
				default: '乡村爱情故事'
			},
			content: {
				type: String,
				default: "啊吧啊吧"
			},
		}
	}
</script>

<style scoped>
	.zhaomu-wrap {
		display: flex;
		width: 98%;
		margin: auto;
		height: 300upx;
		background-color: #FEF2F6;
		justify-content: space-around;
	}

	.left {
		width: 25%;
		margin: auto;
		text-align: center;
	}

	.middle {
		width: 45%;
	}

	.right {
		width: 30%;
		height: 100%;
		text-align: center;
	}

	.avatar {
		height: 120upx;
		width: 120upx;
		border-radius: 50%;
		margin-top: 25upx;
		margin-bottom: 25upx;
	}

	.xiangyan {
		font-size: 35upx;
		margin: 5% 0 5% 0;
	}

	.title {
		margin: 0 0 5% 0;
	}

	.zhaomuz {
		position: relative;
		width: 100%;
		left: 0;
	}

	.bg-img {
		width: 130upx;
		position: absolute;
		top: 5upx;
		left: 40upx;
		text-align: center;
		z-index: 0;
	}

	.word {
		color: white;
		position: absolute;
		top: 15upx;
		left: 56upx;
	}
</style>
